<tr class="prop">
    <td valign="top" class="name">
        <label for="name">${message(code:'commissionPolicy.table.name')}:</label>
    </td>
    <td valign="top" class="value ${hasErrors(bean: commissionPolicyInstance, field: 'name', 'errors')}">
        <input type="text" id="name" name="name" value="${fieldValue(bean: commissionPolicyInstance, field: 'name')}"/>
    </td>
</tr>

<tr class="prop">
    <td valign="top" class="name">
        <label for="product">${message(code:'commissionPolicy.table.product')}:</label>
    </td>
    <td valign="top" class="value ${hasErrors(bean: commissionPolicyInstance, field: 'product', 'errors')}">
        <g:select optionKey="id" optionValue="fullName" from="${Product.list()}" name="product.id" value="${commissionPolicyInstance?.product?.id}" noSelection="['null':'']"/>
    </td>
</tr>

<tr class="prop">
    <td valign="top" class="name">
        <label for="productCategory">${message(code:'commissionPolicy.table.productCategory')}:</label>
    </td>
    <td valign="top" class="value ${hasErrors(bean: commissionPolicyInstance, field: 'productCategory', 'errors')}">
        <g:select optionKey="id" from="${ProductCategory.list()}" name="productCategory.id" value="${commissionPolicyInstance?.productCategory?.id}" noSelection="['null':'']"></g:select>
    </td>
</tr>
<g:javascript library="prototype"/>
<script type="text/javascript">
    function setNullToProduct(){
        $('product.id').selectedIndex = 0;
    }

    function setNullToProductCategory(){
        $('productCategory.id').selectedIndex = 0;
    }

    $('product.id').onchange = function(){
        if($('product.id').value != 'null'){
            setNullToProductCategory();    
        }
    };

    $('productCategory.id').onchange = function(){
        if($('productCategory.id').value != 'null'){
            setNullToProduct();    
        }
    };
</script>